<!-- 钱包-添加账户 -->
<template>
	<view class="page-box">
		<view class="page-main-box">
			<view class="bank-bg">
				<text class="text1">{{formData.accountType === 0 ? '添加银行卡' : '请填写支付宝账号'}}</text>
				<text class="text2">{{formData.accountType === 0 ? '请绑定持卡人本人的银行卡' : '请绑定账号本人的支付宝账号'}}</text>
			</view>
			<!-- <text>{{formData.accountType === 0 ? '银行卡信息' : '支付宝信息'}}</text> -->


			<view class="form-box">
				<view class="form-box-item">
					<text>账户类型</text>

					<view class="">
						<u-radio-group v-model="radiovalue1"
							placement="row"
							size="24"
							@change="groupChange">
							<u-radio :customStyle="{marginBottom: '16rpx',marginRight:'48rpx'}"
								labelSize="24"
								shape="square"
								v-for="(item, index) in radiolist1"
								:key="index"
								:label="item.name"
								:name="item.name">
							</u-radio>
						</u-radio-group>
					</view>

				</view>

				<view class="form-box-item">
					<text>真实姓名</text>
					<view>
						<uni-easyinput v-model.trim="formData.accountName"
							:inputBorder="false"
							placeholder="请输入真实姓名"
							placeholderStyle="color:#8C8A8A;"></uni-easyinput>
					</view>
				</view>
				<view class="form-box-item"
					v-if="formData.accountType === 1">
					<text>支付宝账号</text>
					<view>
						<uni-easyinput v-model.trim="formData.accountNo"
							type="number"
							:inputBorder="false"
							placeholder="请输入支付宝账号"
							placeholderStyle="color:#8C8A8A;">
						</uni-easyinput>
					</view>
				</view>
				<view class="form-box-item"
					v-if="formData.accountType === 0">
					<text>银行卡号</text>
					<view>
						<uni-easyinput v-model.trim="formData.accountNo"
							type="number"
							:inputBorder="false"
							placeholder="请输入银行卡号"
							placeholderStyle="color:#8C8A8A;">
						</uni-easyinput>
					</view>
				</view>
				<view class="form-box-item"
					v-if="formData.accountType === 0">
					<text>银行名称</text>
					<view class="text-box"
						@tap="() => show =true">
						<text class="text">{{formData.bankName ? formData.bankName : '请选择银行名称'}}</text>
						<image style="width: 20rpx;height: 20rpx;"
							src="/static/images/rightIcon.png"></image>
					</view>
				</view>
				<view class="form-box-item"
					v-if="formData.accountType === 0">
					<text>开户行名称</text>
					<view>
						<uni-easyinput v-model.trim="formData.openBankName"
							:inputBorder="false"
							placeholder="请输入开户行名称"
							placeholderStyle="color:#8C8A8A;">
						</uni-easyinput>
					</view>
				</view>
			</view>
			<view class="form-btn"
				@tap="handleSubmit()">保存</view>
		</view>

		<!-- 选择银行名称 -->
		<view class="actionSheet">
			<u-action-sheet class=""
			round=40
				@select="handleSelect($event,'bankName')"
				:actions="bankNameList"
				cancelText="取消"
				:closeOnClickOverlay="true"
				:safeAreaInsetBottom="true"
				:closeOnClickAction="true"
				:show="show"
				@close="show = false">
			</u-action-sheet>
		</view>



	</view>
</template>

<script>
	import {
		postBindAdd
	} from '@/api/artist.js'
	import {
		mapState,
		mapGetters,
		mapActions,
		mapMutations
	} from 'vuex'
	export default {
		name: 'wallet',
		data() {
			return {
				show: false,
				bankNameList: [{
						name: '中国工商银行'
					},
					{
						name: '中国建设银行'
					},
					{
						name: '中国农业银行'
					},
					{
						name: '中国银行'
					},
					{
						name: '交通银行'
					},
					{
						name: '长沙银行'
					},
					{
						name: '招商银行'
					},
					{
						name: '中国邮政储蓄银行'
					},
					{
						name: '兴业银行'
					},
					{
						name: '上海浦东发展银行'
					},
					{
						name: '中信银行'
					},
					{
						name: '中国民生银行'
					},
					{
						name: '中国光大银行'
					},
					{
						name: '平安银行'
					},
					{
						name: '华夏银行'
					}],
					
				formData: {
					accountType: 0, // 账号类型，0银行卡，1支付宝
					accountNo: '', // 账号
					accountName: '', // 账户名，真实姓名
					bankName: '', // 银行名称
					openBankName: '', // 开户行名称
				},

				//单选框数据
				// 基本案列数据
				radiolist1: [{
						name: '银行卡',
						disabled: false
					},
					{
						name: '支付宝',
						disabled: false
					}
				],
				// 默认选中
				radiovalue1: '银行卡',
			};
		},
		computed: {
			...mapGetters(['userInfo', 'isLogin']),
		},
		onLoad({
			accountType
		}) {
			if (accountType) {
				this.formData.accountType = Number(accountType)
			}
		},
		methods: {
			//单选框的方法
			groupChange(n) {
				let s1 = ''
				switch (n) {
					case '银行卡':
						this.formData.accountType = 0;
						break;
					case '支付宝':
						this.formData.accountType = 1;
						break;
				}
				// this.radiovalue1 = n
				console.log(s1, 'groupChange', n, this.radiovalue1);
			},


			handleSelect({
				name
			}, e) {
				if (e === 'bankName') {
					this.formData.bankName = name
				}
			},
			
			/**
			 * 增加提现账户
			 */
			async handleSubmit() {
				
				console.log('打印一下表单数据',this.formData);
				let params = {}
				// 等于零,银行卡,否则就是支付宝
				if(this.formData.accountType === 0){
					params = {
						...this.formData
					}
				}else{
					params = {
						accountType: this.formData.accountType, // 账号类型，0银行卡，1支付宝
						accountNo: this.formData.accountNo, // 账号
						accountName: this.formData.accountName, // 账户名，真实姓名
					}
				}
				
				
				let status = false
				
				for(let key in params){
					console.log(key, 'kkkkkkk',params);
					if(params[key]===''){
						status = true
					}
				}
				
				if(status){
					return uni.showToast({
						duration: 3000,
						title: '还有信息未填',
						icon: 'none'
					})
				}
				
				
				let res = await postBindAdd(params)
				if(res.code === 200){
					uni.showToast({
						duration: 3000,
						title: '绑定成功',
						icon: 'none'
					})

						setTimeout(()=>{
							uni.navigateBack({
								delta: 1
							})
						},3000)
					
				}else{
					uni.showToast({
						duration: 3000,
						title: '绑定失败，请重新提交',
						icon: 'none'
					})
				}
				
			}
		}
	}
</script>

<style lang="less">
	/deep/ .u-action-sheet__item-wrap{
		height: 60vh;
		overflow-y: scroll;
	}
	
	.page-box {
		position: relative;
		box-sizing: border-box;
		background: linear-gradient(180deg, rgba(238, 212, 215, 0.8) 0%, rgba(202, 191, 192, 0) 100%);
		min-height: 100vh;


		.page-main-box {
			position: absolute;
			top: 0;
			#box(100%, none);
			#padding(120rpx 32rpx 0 32rpx);
			#flex(column, start, center);

			&>text {
				color: #0F0F0F;
				font-size: 36rpx;
				font-weight: bold;
				align-self: flex-start;
				margin-bottom: 32rpx;
			}
		}

		.bank-bg {
			margin-bottom: 48rpx;

			#flex(column, center, center);

			.text1 {
				#font(36rpx, @font-title-color);
			}

			.text2 {
				#font(28rpx, @font-title-color);
				margin-top: 28rpx;
			}
		}

		.form-box {
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 6rpx 2rpx rgba(210, 211, 213, 0.5);
			border-radius: 40rpx;
			padding: 32rpx;
			width: 100%;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;

			.form-box-item {
				display: flex;
				align-items: center;
				padding: 12rpx 0;
				border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);

				&:last-child {
					border: 0;
				}

				&>text {
					width: 180rpx;
					color: #0F0D21;
					font-size: 28rpx;
				}

				&>view {
					flex: 1;

				}
			}

			.text-box {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				color: #8C8A8A;
				font-size: 28rpx;
			}
		}

		.form-btn {
			margin-top: 48rpx;
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			background: linear-gradient(180deg, #E27C8A 0%, #EC606F 100%);
			border-radius: 44rpx;
			color: #FFFFFF;
			opacity: 1;
		}

		::v-deep .uni-easyinput__content-input {
			height: 60rpx !important;
			padding-left: 0 !important;
		}
	}
</style>